var realWindChart = echarts.init(document.getElementById('real-wind-chart'));

var option_realWind = {
    tooltip: {
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        show: false,
    },
    series: [
        {
            type: 'gauge',
            center: ["50%", "50%"],
            radius: [0, "100%"],
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 360,
            splitNumber: 12,
            splitLine: {
                length: 10,
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(0,0,0,0.8)',
                    width: "80",
                }
            },
            axisLabel: {
                textStyle: {
                    color: "#fff"
                }
            },
            pointer: {color: "red", width: 4},
            detail: {
                show: false,
                formatter: '{value}%'
            },
            data: [{value: 50}]
        }
    ]
};
timeTicket = setInterval(function () {
    option_realWind.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    realWindChart.setOption(option_realWind, true);
}, 1000);

var coordinates_chart = echarts.init(document.getElementById('coordinates'))
var option_coordinates = {
    title:{},
    tooltip: {
        trigger: 'axis'
    },
    toolbox: {
        show: false,
    },
    calculable: true,


    series: [
        {
            type: 'map',
            mapType: 'china',
            roam: true,
            itemStyle: {
                normal: {
                    label: {show: false},
                    color: 'black'
                },
            },
            data:[
            ],
            markPoint : {
                symbolSize: 6,       // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
                itemStyle: {
                    normal: {
                        borderColor: '#fff',
                        borderWidth: 1,            // 标注边线线宽，单位px，默认为1
                        label: {
                            show: true
                        }
                    },
                    emphasis: {
                        borderColor: '#fff',
                        borderWidth: 5,
                        label: {
                            show: true
                        }
                    }
                },
                data : [
                    {name: "淮安", value: 2},
                    {name:'成都',value:1}
                ]
            },
            geoCoord: {
                "淮安":[119.02,33.62],
                '成都':[104.07,30.67]
            }

        }
    ]
};
coordinates_chart.setOption(option_coordinates);

var relativeGroundSpeedChart = echarts.init(document.getElementById('relative-ground-speed-chart'));

var option_relative_ground_speed = {
    tooltip: {
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        show: false,
    },
    series: [
        {
            type: 'gauge',
            center: ["50%", "50%"],
            radius: [0, "100%"],
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 80,
            splitNumber: 8,
            splitLine: {
                length: 10,
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(0,0,0,0.8)',
                    width: "60",
                }
            },
            axisLabel: {
                textStyle: {
                    color: "#fff"
                }
            },
            pointer: {color: "red", width: 4},
            detail: {
                show: false,
                formatter: '{value}%'
            },
            data: [{value: 50}]
        }
    ]
};
timeTicket = setInterval(function () {
    option_relative_ground_speed.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    relativeGroundSpeedChart.setOption(option_relative_ground_speed, true);
}, 1000);

var relativeWaterSpeedChart = echarts.init(document.getElementById('relative-water-speed-chart'));

var option_relative_water_speed = {
    tooltip: {
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        show: false,
    },
    series: [
        {
            type: 'gauge',
            center: ["50%", "50%"],
            radius: [0, "100%"],
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 80,
            splitNumber: 8,
            splitLine: {
                length: 10,
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(0,0,0,0.8)',
                    width: "60",
                }
            },
            axisLabel: {
                textStyle: {
                    color: "#fff"
                }
            },
            pointer: {color: "red", width: 4},
            detail: {
                show: false,
                formatter: '{value}%'
            },
            data: [{value: 50}]
        }
    ]
};
timeTicket = setInterval(function () {
    option_relative_water_speed.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    relativeWaterSpeedChart.setOption(option_relative_water_speed, true);
}, 1000);

var ship_heading_chart = echarts.init(document.getElementById("ship_heading_panel"));
option_ship_heading = {
    toolbox: {show: false},
    grid: {
        y: 80,
        y2: 70
    },
    xAxis: [
        {
            type: 'value',
            position: 'top',
            splitLine: {lineStyle: {type: 'dashed'}},
        }
    ],
    yAxis: [
        {
            type: 'category',
            axisLine: {show: true},
            axisLabel: {show: false},
            axisTick: {show: false},
            splitLine: {show: false},
            data: ['对水艏向', '实际艏向','对地航向']
        }
    ],
    series: [
        {
            type: 'bar',
            itemStyle: {
                normal: {
                    color: 'black',
                    borderRadius: 50,
                    label: {
                        show: true,
                        position: 'left',
                        formatter: '{b}'
                    }
                }
            },
            data: [
                {value: -30}, {value: 60},{value:45}
            ]
        }
    ]
};
ship_heading_chart.setOption(option_ship_heading);

var relativeWindChart = echarts.init(document.getElementById('relative-wind-chart'));

var option_relativeWind = {
    tooltip: {
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        show: false,
    },
    series: [
        {
            type: 'gauge',
            center: ["50%", "50%"],
            radius: [0, "100%"],
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 360,
            splitNumber: 12,
            splitLine: {
                length: 10
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(0,0,0,0.8)",
                    width: "80",
                }
            },
            axisLabel: {
                textStyle: {
                    color: "#fff"
                }
            },
            pointer: {color: "red", width: 4},
            detail: {
                show: false,
                formatter: '{value}%'
            },
            data: [{value: 50,}]
        }
    ]
};
timeTicket = setInterval(function () {
    option_relativeWind.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    relativeWindChart.setOption(option_relativeWind, true);
}, 1000);


var depth_chart = echarts.init(document.getElementById('depth'));
var option_depth_chart = {
    tooltip: {
        trigger: 'axis'
    },
    dataZoom: {
        show: false,
        start: 0,
        end: 100
    },
    xAxis: [
        {
            position: 'top',
            name: 'min',
            type: 'category',
            boundaryGap: true,
            data: (function () {
                var res = [];
                var len = 10;
                while (len--) {
                    res.push(len + 1);
                }
                return res;
            })()
        }
    ],
    yAxis: [
        {
            position: 'right',
            name: 'm',
            type: 'value',
            scale: true,
            boundaryGap: [0.2, 0.2],
        }
    ],
    series: [
        {
            itemStyle:{
                normal: {color:'black'}
            },
            type: 'line',
            data: (function () {
                var res = [];
                var len = 10;
                while (len--) {
                    res.push(10);
                }
                return res;
            })()
        }
    ]
};
var lastData = 11;
var axisData;
timeTicket = setInterval(function () {
    lastData += Math.random() * ((Math.round(Math.random() * 10) % 2) == 0 ? 1 : -1);
    lastData = lastData.toFixed(1) - 0;
    axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

    // 动态数据接口 addData
    depth_chart.addData([
        [
            0,        // 系列索引
            Math.round((Math.random() + 1) * 25), // 新增数据
            false,     // 新增数据是否从队列头部插入
            false     // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
        ],
    ]);
}, 1000);
depth_chart.setOption(option_depth_chart);


